//webpack的配置文件
const path = require('path')

//使用第一个插件html-webpack-plugin
const HtmlWebpackPlugin = require('html-webpack-plugin')

//清除打包目录的插件
const {CleanWebpackPlugin} = require('clean-webpack-plugin')
//css提取插件
const MiniCssExtractPlugin = require('mini-css-extract-plugin')

//抛出对象commmonjs语法
module.exports = {
 //入口文件
 entry:'./src/main.js',
 //输出配置文件
 output:{
    //打包后文件名字
    filename:"[name].js",
    //指定文件的输出目录结构
    path:path.resolve(__dirname,'dist'),
 },
resolve:{
  //支持省略后缀
  extensions:['.js','.jsx','.json'],
  alias:{
     '@':path.resolve(__dirname,'src')
  }
},
 //配置webpack-dev-server配置
  devServer:{
      // 端口号
      port:8000,
      open:true, //自动打开浏览器
      // proxy:{

      // }
 },

 //loader配置,webpack能够支持更多的模块类型,需要使用loader进行转换
 module:{
      rules:[
         {
            test:/\.css$/i, //配置css结尾的文件
            //从右到左依次执行，先写css-loader，在写style-loader
            //指定具体的loader
            use:[{
               loader:MiniCssExtractPlugin.loader,
                options:{
                  publicPath:'../'
               }
            },'css-loader'],
         },

         //支持js或jsx文件
         {
            test:/\.js|.jsx$/i,
            exclude:/(node_modules|browser_components)/, //排除node_modules文件夹(可选)
            loader:"babel-loader"
         }
      ]
 },

 //插件配置
 plugins:[
     new HtmlWebpackPlugin({
        template:'./public/index.html'
     }), //实例化构建
     new CleanWebpackPlugin(),//清除插件

     new MiniCssExtractPlugin({
        filename:'css/[name].css'
     })
 ],      
 //开发环境模式的配置,development   production生产模式代码会进行压缩
 mode:'development',
}